import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import avator from "@/assets/images/me/avator.png"

import {useEffect} from "react";
import {useSelector} from "react-redux";
import {RootState} from "@/store";

export default function activityAllManScreen() {

    const router = useRouter();
    const activity = useSelector((state: RootState) => state.activityDetail);

    return (
        <View style={{ height: "100%", backgroundColor: "#FFF" }}>
            <Stack.Screen
                options={{
                    title: '全部成员', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
           <View style={{ paddingHorizontal: 12, }}>
             <ScrollView style={{ height: "100%", paddingTop: 10, }}>
                 {
                     activity.activityDetail.members.map((item: any, index: Number) => {
                         return (
                             <TouchableOpacity key={index}>
                                 <View style={styles.groupListContainer}>
                                     <View style={styles.avator}>
                                         <Image source={{ uri: item.avatar }} style={{ width: "100%", height:  "100%" }} />
                                     </View>
                                     <View style={styles.name}>
                                         <Text>{ item.nickname }</Text>
                                     </View>
                                 </View>
                             </TouchableOpacity>
                         )
                     })
                 }
             </ScrollView>
           </View>
        </View>

    );
}

const styles = StyleSheet.create({
    groupListContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    avator: {
        height: 44,
        width: 44,
        borderRadius: 50,
        overflow: "hidden",
    },
    name: {
        marginLeft: 10,

    },
});
